<template>
    <div class="outbound-management">
      <!-- 筛选表单 -->
      <el-form :model="queryParams" inline class="filter-form">
        <el-form-item label="出库状态">
          <el-select v-model="queryParams.status" placeholder="全部" clearable style="width: 120px">
            <el-option label="全部" value="" />
            <el-option label="未出库" value="未出库" />
            <el-option label="已出库" value="已出库" />
            <el-option label="作废" value="作废" />
          </el-select>
        </el-form-item>
  
        <el-form-item label="出库类型">
          <el-select v-model="queryParams.type" placeholder="全部" clearable style="width: 120px">
            <el-option label="全部" value="" />
            <el-option label="退货出库" value="退货出库" />
            <el-option label="销售出库" value="销售出库" />
            <el-option label="生产出库" value="生产出库" />
          </el-select>
        </el-form-item>
  
        <el-form-item label="出库单号">
          <el-input 
            v-model="queryParams.orderNo" 
            placeholder="请输入出库单号"
            style="width: 180px"
            clearable
          />
        </el-form-item>
  
        <el-form-item label="业务单号">
          <el-input
            v-model="queryParams.businessNo"
            placeholder="请输入业务单号"
            style="width: 180px"
            clearable
          />
        </el-form-item>
  
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
  
      <!-- 操作栏 -->
      <div class="action-bar">
        <el-button type="primary" icon="Plus">新增</el-button>
        <el-button @click="toggleAllDetails">{{ showAllDetails ? '全部收起' : '全部展开' }}</el-button>
      </div>
  
      <!-- 出库单表格 -->
      <el-table
        :data="orders"
        style="width: 100%"
        border
        row-key="id"
        :expand-row-keys="expandedRowKeys"
        :max-height="tableMaxHeight"
      >
        <el-table-column type="expand">
          <template #default="{ row }">
            <div class="goods-details">
              <div class="detail-header">商品明细</div>
              <el-table :data="row.goods" border size="small">
                <el-table-column prop="name" label="商品名称" width="200" />
                <el-table-column prop="spec" label="规格名称" width="150" />
                <el-table-column prop="quantity" label="数量" align="center" />
                <el-table-column prop="amount" label="金额(元)" align="right">
                  <template #default="{ row }">{{ row.amount.toFixed(2) }}</template>
                </el-table-column>
              </el-table>
              <div class="total-info">
                总数量：{{ totalQuantity(row) }} 总金额：{{ totalAmount(row).toFixed(2) }}元
              </div>
            </div>
          </template>
        </el-table-column>
  
        <el-table-column prop="orderNo" label="单号/业务单号" width="220">
          <template #default="{ row }">
            <div class="order-no">{{ row.orderNo }}</div>
            <div v-if="row.businessNo" class="business-no">业务单号：{{ row.businessNo }}</div>
          </template>
        </el-table-column>
  
        <el-table-column prop="warehouse" label="仓库" width="120" />
        
        <el-table-column label="总数量/总金额" width="180">
          <template #default="{ row }">
            <div>数量：{{ row.quantity }}</div>
            <div>金额：{{ totalAmount(row).toFixed(2) }}元</div>
          </template>
        </el-table-column>
  
        <el-table-column label="出库状态" width="120">
          <template #default="{ row }">
            <el-tag :type="statusTagMap[row.status]" effect="light" size="small">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
  
        <el-table-column prop="type" label="出库类型" width="120" />
  
        <el-table-column label="客户" width="150">
          <template #default="{ row }">{{ row.client || '-' }}</template>
        </el-table-column>
  
        <el-table-column label="操作时间" width="220">
          <template #default="{ row }">
            <div>创建：{{ formatTime(row.createTime) }} {{ row.operator }}</div>
            <div v-if="row.updateTime">更新：{{ formatTime(row.updateTime) }} {{ row.updater }}</div>
          </template>
        </el-table-column>
  
        <el-table-column label="操作" width="220" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary">修改</el-button>
            <el-button link type="primary" @click="toggleDetails(row.id)">
              {{ expandedRowKeys.includes(row.id) ? '收起' : '查看' }}
            </el-button>
            <el-button link type="danger">删除</el-button>
            <el-button link type="primary">打印</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页组件 -->
    
    <div class="pagination-container">
      <el-pagination
      background
      layout="slot,total, sizes, prev, pager, next, jumper"
      :page-sizes="[10, 20, 30, 40]"
      :total="page.totalCount"
      v-model:current-page="page.currentPage"
      v-model:page-size="page.pageSize"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </div>
  </template>
  
  <script setup lang="ts">
  import { reactive, ref } from 'vue'
  import dayjs from 'dayjs'
  
  // 状态管理
  const expandedRowKeys = ref<string[]>([])
  const showAllDetails = ref(false)
  const tableMaxHeight = ref(600) // 初始高度
  // 查询参数
  const queryParams = reactive({
    status: '',
    type: '',
    orderNo: '',
    businessNo: ''
  })
  const page=reactive({
  totalCount:0,
  currentPage:1,
  pageSize:10,
  totalPages:0
})
  // 状态标签映射
  const statusTagMap = {
    '未出库': 'warning',
    '已出库': 'success',
    '作废': 'danger'
  } as const
  
  // 展开/收起控制
  const toggleDetails = (id: string) => {
    const index = expandedRowKeys.value.indexOf(id)
    index === -1 
      ? expandedRowKeys.value.push(id) 
      : expandedRowKeys.value.splice(index, 1)
  }
  
  const toggleAllDetails = () => {
    showAllDetails.value = !showAllDetails.value
    expandedRowKeys.value = showAllDetails.value 
      ? orders.value.map(o => o.id) 
      : []
  }
  const handleSizeChange = (val: number) => {
  page.pageSize = val;
};

const handleCurrentChange = (val: number) => {
  page.currentPage = val;
};
  // 完整示例数据
  const orders = ref([
    {
      id: '1',
      orderNo: 'CK03063186',
      warehouse: '苏州园区',
      quantity: 12,
      status: '作废',
      type: '销售出库',
      createTime: '2024-03-06 10:39:00',
      operator: 'ck',
      updateTime: '2024-03-06 10:40:00',
      updater: 'ck',
      goods: [
        { name: '商品1', spec: '规格A', quantity: 5, amount: 100 },
        { name: '商品2', spec: '规格B', quantity: 7, amount: 150 }
      ]
    },
    {
      id: '2',
      orderNo: 'CK03057978',
      businessNo: '44',
      warehouse: '常熟冷链仓',
      quantity: 4,
      status: '已出库',
      type: '销售出库',
      createTime: '2024-03-05 21:32:00',
      operator: 'ck',
      updateTime: '2024-03-05 21:32:00',
      updater: 'ck',
      goods: [
        { name: '商品3', spec: '规格C', quantity: 4, amount: 200 }
      ]
    },
    {
      id: '3',
      orderNo: 'CK03054834',
      warehouse: '苏州园区',
      quantity: 3,
      status: '已出库',
      type: '销售出库',
      client: '苏州CS有限公司',
      createTime: '2024-03-05 21:23:00',
      operator: 'ck',
      updateTime: '2024-03-05 21:23:00',
      updater: 'ck',
      goods: [
        { name: '商品4', spec: '规格D', quantity: 3, amount: 300 }
      ]
    },
    {
      id: '4',
      orderNo: 'CK03053256',
      warehouse: '吴江仓',
      quantity: 10,
      status: '已出库',
      type: '销售出库',
      client: '苏州CS有限公司',
      createTime: '2024-03-05 16:00:00',
      operator: 'ck',
      updateTime: '2024-03-05 16:00:00',
      updater: 'ck',
      goods: [
        { name: '商品5', spec: '规格E', quantity: 10, amount: 500 }
      ]
    }
  ])
  
  // 计算方法
  const totalQuantity = (row: any) => row.goods.reduce((sum: number, item: any) => sum + item.quantity, 0)
  const totalAmount = (row: any) => row.goods.reduce((sum: number, item: any) => sum + item.amount, 0)
  const formatTime = (time: string) => dayjs(time).format('MM-DD HH:mm')
  
  // 搜索和重置方法
  const handleSearch = () => {
    // 实现搜索逻辑
  }
  
  const handleReset = () => {
    Object.assign(queryParams, {
      status: '',
      type: '',
      orderNo: '',
      businessNo: ''
    })
  }
  </script>
  
  <style scoped>
  .outbound-management {
    padding: 16px;
    background: #f5f7fa;
  }
  
  .filter-form {
    background: white;
    padding: 16px;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    :deep(.el-form-item) {
      margin-right: 16px;
      margin-bottom: 12px;
    }
  }
  
  .action-bar {
    margin: 16px 0;
    .el-button {
      margin-right: 12px;
    }
  }
  
  .order-no {
    font-weight: 500;
    color: #1890ff;
  }
  
  .business-no {
    color: #666;
    font-size: 12px;
    margin-top: 4px;
  }
  
  .goods-details {
    padding: 16px;
    background: #fafafa;
    .detail-header {
      font-weight: 500;
      margin-bottom: 12px;
    }
    .total-info {
      text-align: right;
      padding-top: 12px;
      color: #333;
      font-weight: 500;
    }
  }
  
  .el-table {
    margin-top: 16px;
    :deep(.el-table__cell) {
      padding: 12px 0;
    }
  }
  
  .el-tag {
    font-size: 12px;
    &.el-tag--warning {
      background-color: var(--el-color-warning-light-9);
      border-color: var(--el-color-warning-light-5);
    }
    &.el-tag--success {
      background-color: var(--el-color-success-light-9);
      border-color: var(--el-color-success-light-5);
    }
    &.el-tag--danger {
      background-color: var(--el-color-danger-light-9);
      border-color: var(--el-color-danger-light-5);
    }
  }
  /* 新增滚动容器样式 */
.scroll-container {
  height: calc(100vh - 200px); /* 根据实际顶部高度调整 */
  overflow-y: auto;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

/* 优化展开面板高度 */
.goods-details {
  max-height:622px;
  overflow-y: auto;
}

/* 保持操作栏固定 */
.action-bar {
  position: sticky;
  top: 0;
  background: white;
  z-index: 2;
  padding: 16px 0;
}

  </style>